<template>
  <div>
    <el-dialog title="关联商品" v-model="dialogVisible" width="40%">
      <template #header>
        <div class="flex flex-col">
          <div class="drawer-header">
            <div class="flex items-center dot">
              <div class="w-[5px] h-[5px] rounded-1/2 bg-[#3721FF]"></div>
              <span class="ml-2 drawer-title">关联商品</span>
            </div>
          </div>
        </div>
      </template>
      <el-table :data="relatedGoodsList" style="width: 100%">
        <el-table-column prop="id" label="商品ID" />
        <el-table-column prop="title" label="商品名称" />
        <el-table-column prop="areaName" label="销售地区" />
        <el-table-column prop="language" label="语言" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <p class="text-[#3721FF] cursor-pointer" @click="viewProduct(row.id)">查看商品</p>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer el-dia-btn">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" color="#3721FF" @click="dialogVisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <ProductView ref="productViewRef" :product-id="selectProductId" />
</template>

<script setup lang="ts">
import { ProductApi } from '@/api/product/addProduct/index'
import ProductView from '../productView/index.vue'

const props = defineProps(['productId'])
const dialogVisible = ref(false)
const productViewRef = ref(null)
const selectProductId = ref(null)
const relatedGoodsList = ref([])
const handleProductdCorrelation = async (id) => {
  await ProductApi.getProductdCorrelations({ id: id }).then((res) => {
    console.log(res)
    relatedGoodsList.value = res
  })
}
const viewProduct = (id) => {
  productViewRef.value?.show(id)
}
const show = (productId) => {
  selectProductId.value = productId
  dialogVisible.value = true
  if (productId) {
    handleProductdCorrelation(productId)
  }
}
const hide = () => {
  dialogVisible.value = false
}
onMounted(() => {})
defineExpose({
  show,
  hide
})
</script>

<style scoped>
@import '@/styles/website.scss';
</style>
